<template>
  <div class="app-container vr-dynamic-bg">
    <!-- 添加VR全局背景效果 -->
    <div class="vr-grid-bg"></div>
    <div class="vr-circuit-bg"></div>
    <div class="vr-scan-effect"></div>

    <!-- 霓虹粒子容器 -->
    <div class="vr-particles-container">
      <div
        v-for="i in 30"
        :key="`particle-${i}`"
        :class="`vr-particle ${['blue', 'purple', 'pink'][Math.floor(Math.random() * 3)]}`"
        :style="{
          left: `${Math.random() * 100}%`,
          width: `${Math.random() * 4 + 2}px`,
          height: `${Math.random() * 4 + 2}px`,
          animationDuration: `${Math.random() * 20 + 10}s`,
          animationDelay: `${Math.random() * 10}s`,
        }"
      ></div>
    </div>

    <el-header class="header">
      <div class="logo vr-neon-text">VR Game</div>
      <el-menu
        mode="horizontal"
        router
        :ellipsis="false"
        class="nav-menu"
        background-color="transparent"
        text-color="#fff"
        active-text-color="#00c3ff"
      >
        <el-menu-item index="/">首页</el-menu-item>
        <el-menu-item index="/features">游戏特性</el-menu-item>
        <el-menu-item index="/scenes">游戏场景</el-menu-item>
        <el-menu-item index="/download">游戏下载</el-menu-item>
        <el-menu-item index="/about">关于我们</el-menu-item>
      </el-menu>
    </el-header>

    <el-main class="main-content">
      <router-view v-slot="{ Component }">
        <transition
          enter-active-class="animate__animated animate__fadeIn"
          leave-active-class="animate__animated animate__fadeOut"
          mode="out-in"
        >
          <component :is="Component" />
        </transition>
      </router-view>
    </el-main>

    <el-footer class="footer">
      <span class="vr-neon-text">© 2025 VR Game. All rights reserved.</span>
    </el-footer>
  </div>
</template>

<style>
html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background-color: #0a0a1a;
  color: #fff;
  font-family: 'Arial', sans-serif;
}

body {
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  position: relative;
}

#app {
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
}

/* 修复双滚动条问题 */
.el-main {
  overflow-y: visible;
  padding: 0 !important;
}

/* 自定义Element Plus组件样式 */
.el-menu {
  --el-menu-bg-color: transparent !important;
  --el-menu-hover-bg-color: rgba(0, 195, 255, 0.1) !important;
  --el-menu-active-color: #00c3ff !important;
  --el-menu-text-color: #fff !important;
  --el-menu-hover-text-color: #00c3ff !important;
}

.el-menu-item.is-active {
  border-bottom-color: #00c3ff !important;
  text-shadow: 0 0 10px rgba(0, 195, 255, 0.5) !important;
}

.el-menu-item:hover {
  background-color: rgba(0, 195, 255, 0.1) !important;
}
</style>

<style scoped>
.app-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  background-color: #0a0a1a;
  position: relative;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: rgba(34, 34, 34, 0.7);
  backdrop-filter: blur(10px);
  padding: 0 20px;
  height: 60px;
  border-bottom: 1px solid rgba(0, 195, 255, 0.2);
  position: relative;
  z-index: 100;
}

.logo {
  font-size: 28px;
  font-weight: bold;
  letter-spacing: 1px;
  color: #00c3ff;
}

.nav-menu {
  border-bottom: none;
}

.main-content {
  flex: 1;
  padding: 0;
  position: relative;
  z-index: 10;
}

.footer {
  text-align: center;
  background-color: rgba(34, 34, 34, 0.7);
  backdrop-filter: blur(10px);
  color: #fff;
  padding: 20px 0;
  border-top: 1px solid rgba(0, 195, 255, 0.2);
  position: relative;
  z-index: 100;
}
</style>
